<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <Table
      ref="table"
      :auto-featch="false"
      :fetch-data="fetchData"
      :options="[]"
      :useAction="true"
    >
      <template #default>
        <el-table-column
          label="开始时间"
          align="center"
          key="startDate"
          prop="startDate"
        >
        </el-table-column>
        <el-table-column
          label="结束时间"
          align="center"
          key="endDate"
          prop="endDate"
        >
        </el-table-column>
      </template>
      <template #actionButton="{ row }">
        <el-button
          type="text"
          icon="Delete"
          style="color: red"
          @click="handleDel(row)"
          >删除</el-button
        >
      </template>
    </Table>
    <DialogVform
      :formJson="formJson"
      ref="dialogVform"
      :title="'时间段列表'"
      @onSubmit="onSubmit"
    ></DialogVform>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import { listApi as APIS } from "@/api/znxj/xjsjd.js";
import { useAsyncData } from "@/views/hooks/useAsyncData.js";
import DialogVform from "@/components/dialogVform/index";
import formJson from "./inner.json";
const { proxy } = getCurrentInstance();
const props = defineProps({
  parentNode: {
    type: Object,
    default: () => ({}),
  },
});
const plugAdd = (data) => {
  return {
    ...data,
    periodNameId: props.parentNode.id,
  };
};
const showSearch = ref(true);
const dialogVform = ref();
const table = ref();
const filterForm = ref({});

const { fetchData, getList, handleAdd, onSubmit, handleDel } = useAsyncData({
  APIS,
  dialogVform,
  table,
  proxy,
  filterForm: filterForm.value,
  plugAdd,
});
watch(
  () => props.parentNode,
  (val) => {
    filterForm.value.periodNameId = val.id || null;
    getList();
  },
  {
    deep: true,
  }
);
const changeParent = (p) => {
  filterForm.value.periodNameId = p.id || null;
  getList();
};
defineExpose({
  changeParent,
});
</script>

<style lang="scss" scoped></style>
